<template>
	<view class="body"> 
		<scroll-view
		 :scroll-y="true" 
		 :scroll-into-view="scrollToView"
		 :show-scrollbar="true"
		 :scroll-with-animation="true" 
		 class="message"
		>
		<view class="list" v-for="(item,index) in message" :key="index">
				<view class="left" v-if="item.id == options.id & item.message != null">
					<view class="user-chat" :id="'msg'+index">
						<view class="left-userimg">
							<u-avatar shape="square" size="35" :src="options.img" fontSize="26"></u-avatar>
						</view>
						<!-- 对话框小样式 -->
						<view class="left-chat-icon">  
						</view> 
						<text class="left-usertext">{{item.message}}</text>
					</view>
				</view>
				<view class="right" v-if="item.id == myuser.id & item.message != null "> 
					<view class="my-chat" :id="'msg'+index">
						<view class="right-userimg">
							<u-avatar  shape="square" size="35" :src="myuser.img" fontSize="26"></u-avatar>
						</view>
						<!-- 对话框小样式 -->
						<view class="right-chat-icon">
						</view>
						<text class="right-usertext">{{item.message}}</text>
					</view> 
				</view>
			</view> 
		</scroll-view>
		<!-- 底部对话框 -->
		<view class="bottom">
			<view class="input">
				<input placeholder="请输入内容"  class="input-input" v-model="value"/>
			</view>
			<button class="myuserbutton" @click="sendmessage">发送</button>
		</view>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	const app = getApp()
	export default {
		data() {
			return {
				value:"", 
				options:{ //好友
					id:"",
					name:"",
					img:"",
				},
				myuser:{ //自己
					id:"",
					name:"",
					img:"",
				},
				message:[
					
				],//渲染页面的消息数组
				total:0,//再该页面时收到的消息数，用于退出该页面清楚对应的tabber数量
				scrollToView:"",//滚动
				emojiData:[],//表情库数组
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
			    title: options.name, 
			})
			uni.setNavigationBarColor({
			    frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
			})
			//获取缓存用户信息
			var user = uni.getStorageSync('user')
			var userid = 0
			if(! user){
				uni.$u.toast("您还未登录")
				return
			}else{
				userid = JSON.parse(user).id
				//设置好友信息
				this.options.id = options.id
				this.options.name = options.name
				this.options.img = options.img
				//设置自己信息
				this.myuser.id = userid
				this.myuser.name = JSON.parse(user).name
				this.myuser.img = JSON.parse(user).img
			}
			//获取消息
			this.getmessage()
			this.onSystem()
		},
		//结束
		onUnload(){
			var UserList = JSON.parse(uni.getStorageSync("userfriendlist"))
			for(var i = 0;i< UserList.length;i++){
				if(this.options.id == UserList[i].id){
					this.$set(UserList[i],"totalMessage",0) 
					//更新缓存
					var str = UserList
					uni.setStorageSync("userfriendlist",JSON.stringify(str))
					this.$forceUpdate()
					break
				}
			} 
			//设置tabbar的值
			var num = uni.getStorageSync("tabbar")
			if(str != "null"){
				num = num - this.total
				uni.setStorageSync("tabbar",num)
			}
		},
		methods: {
			//监听接收消息方法
			onSystem(){ 
				uni.$on("usermessage",res=>{
					//将消息添加到本页面消息数组
					if(res.sendUser == this.options.id){ 
						var a = { //封装用于页面渲染的对象
							id:"",
							message:"",  
						}
						a.id = res.sendUser
						a.message = res.messagecontent
						this.message.push(a)
						//更新消息缓存
						var userlist = JSON.parse(uni.getStorageSync("userfriendlist"))
						for(var i = 0;i<userlist.length;i++){
							if(userlist[i].id == res.sendUser){
								userlist[i].lastmessage = res.messagecontent
							} 
						} 
						uni.setStorageSync("userfriendlist",JSON.stringify(userlist))
					}
					this.total += 1
					this.end()
				})
			},
			//获取缓存消息
			getmessage(){
				var mage = uni.getStorageSync("userMessage")
				if(typeof mage == 'string' & mage.length > 0){
					var me = JSON.parse(mage)
					for (var i = 0;i<me.length;i++) {
						//好友消息
						if(me[i].sendUser == this.options.id & me[i].receiveUser == this.myuser.id){
							var a = { //封装用于页面渲染的对象
								id:"",
								message:"", 
							}
							a.id = me[i].sendUser
							a.message = me[i].messagecontent
							this.message.push(a)
							continue
						}else if(me[i].sendUser == this.myuser.id & me[i].receiveUser == this.options.id){
							var a = { //封装用于页面渲染的对象
								id:"",
								message:"", 
							}
							a.id = me[i].sendUser
							a.message = me[i].messagecontent
							this.message.push(a)
							continue
						}
					}
				}
			},
			//发送消息
			sendmessage(){
				var user = uni.getStorageSync('user')
				if(! user){
					uni.$u.toast("您还未登录")
					return
				}
				
				if(this.options.id == this.myuser.id){
					uni.$u.toast("不能自己给自己发送消息")
					return
				}
				var se = {
					sendUser:"",//发送用户
					sendUserName:"",//发送用户名
					sendUserImg:"",//发送用户头像
					receiveUser:"", //接收用户id
					messagecontent:"",//发送的信息
					isSystem:1//消息类型
				}
					se.sendUser=this.myuser.id 
					se.sendUserName=this.myuser.name
					se.sendUserImg = this.myuser.img
					se.receiveUser= this.options.id
					se.messagecontent = this.value
					//发送信息
					app.globalData.websocket.sendMsg(se)
					 //将用户发送的信息添加到消息数组里
					 var a = {
					 	id:"",
					 	message:""
					 }
					 //将发送的消息添加到缓存
					 var message = []
					 var T = uni.getStorageSync("userMessage")
					 if(T){
						 message = JSON.parse(T)
						 message.push(se)
						 uni.setStorageSync("userMessage",JSON.stringify(message))
					 }else{
						 message.push(se)
						 uni.setStorageSync("userMessage",JSON.stringify(message))
					 }
					 a.id = this.myuser.id
					 a.message = this.value  
					 this.message.push(a)
					 this.value = null //置空输入框 
					 this.end()
					 
			},
			//发送接收消息滚动到底部
			end(){
				//设置消息滚动到底部
				 this.$nextTick(() => {
				 	//这里将 最后一条聊天的下标'chatItem_' + index 赋值给 刚刚绑定的scrollIntoIndex。这样就可以实现滚动到底部
				 	var num = this.message.length - 1
					console.log("num值是:"+num)
				 	this.scrollToView = 'msg'+ num
					console.log("点击后的id值是："+this.scrollToView)
				});
			}
		}
	}
</script>

<style>
	@import url("../static/css/chatpage.css"); 
</style>
